<template>
    <el-drawer
        direction="rtl"
        :visible.sync="isVisible"
        :size="drawerSize"
        :append-to-body="appendToBody"
        :showClose="false"
        :with-header="false"
        :before-close="handleClose">
        <div class="info-part-container">
          <div class="inner-container ">
            <div class="icon-container">
              <i class="el-icon-map-location icon-container__icon"></i>
              <div class="icon-container__hint">
                <span>层级类型</span>
              </div>
            </div>
            <div class="building-type-container">
              <span>{{ asideTitle(visualLevelFilter(visualLevel)) }}</span>
            </div>
          </div>
        </div>
        <el-menu class="menu" @select="handleMenuClick" background-color="#fff" :default-active="modelIndex">
          <div class="item-container" v-for="location in locationList" :key="location.myId">
            <el-menu-item 
              class="menu-item"
              :index="location.myId"
              :style="{gridColumn: ((location.children && location.children.length !== 0) ? '1' : '1 / span 2')}">
              <i :class="asideListIcon(visualLevelFilter(visualLevel))" style="font-size: 38px;"></i>
              <span class="menu-item__name">{{ location.modelName }}</span>
            </el-menu-item>
            <i v-show="location.children && location.children.length !== 0" class="el-icon-guide enter-icon" @click="callChildDrawer(location.children)"></i>
          </div>
        </el-menu>
        <location-list-aside
          ref="childAside"
          :visual-level="visualLevel + 1"
          :appendToBody="true"
          :locationList="presentChildList"/>
    </el-drawer>
</template>
<script>
import { MyCesiumConsts } from '@/constant';

export default {
    name: 'LocationListAside',
    props: {
        locationList: {
          type: Array,
          default: () => []
        },
        appendToBody: {
          type: Boolean,
          default: false
        },
        visualLevel: {
          type: Number,
          default: 1,
        },
        modelIndex: {
          type: String,
          default: '',
        }
    },
    data() {
      return {
        isVisible: false,
        drawerSize: '20%',
        presentChildList: [],
      }
    },
    computed: {
      hasChild() {
        return this.locationList.children && this.locationList.children.length !== 0;
      },
    },
    methods: {
      visualLevelFilter(value) {
        const _vl = MyCesiumConsts.VISUAL_LEVEL;
        if (value < _vl.OUTER_SPACE || value >= _vl.length) {
          return _vl.OUTER_SPACE;
        }
        return value;
      },
      asideTitle(vl) {
        return MyCesiumConsts.VISUAL_LEVEL_DESCRIPTIONS[vl];
      },
      asideListIcon(vl) {
        return MyCesiumConsts.VISUAL_LEVEL_ICONS[vl];
      },
      openParentDrawer(parentClickEvent) {
        this.isVisible = true;
        // handle the problem of button focus
        var targetElement = parentClickEvent.target;
        // click on the icon element
        if (targetElement.nodeName === 'I') {
          targetElement = targetElement.parentNode;
        }
        targetElement.blur();
      },
      handleMenuClick(id) {
        const selectedList = this.locationList.filter(location => {
          return location.myId === id;
        });
        const selected = selectedList[0];
        // call renderModel function on parent instance
        // using visual level to judge the level of drawer
        var cesiumVueInstance;
        const VISUAL_LEVEL = MyCesiumConsts.VISUAL_LEVEL;
        var isMultiLevel = false;
        if (this.visualLevel === VISUAL_LEVEL.FEATURE_FOCUS || this.visualLevel === VISUAL_LEVEL.INNER_ROOM) {
          // because of the root element, the parent instance is: this.$parent.$parent
          cesiumVueInstance = this.$parent.$parent.$parent;
          // when opening the inner drawer, need to close parent drawer
          isMultiLevel = true;
        } else {
          cesiumVueInstance = this.$parent;
        }
        this.closeDrawer();
        if (isMultiLevel) {
          const parentDrawer = this.$parent.$parent;
          parentDrawer.changeDrawerWidth('20%');
          parentDrawer.closeDrawer();
        }
        cesiumVueInstance.renderLocation(selected, this.visualLevel);
      },
      callChildDrawer(childrenList) {
        this.changeDrawerWidth('40%');
        this.presentChildList = childrenList;
        this.$refs.childAside.isVisible = true;
      },
      handleClose(done) {
        this.changeDrawerWidth('20%');
        if (this.$parent.$parent.drawerSize) {
          this.$parent.$parent.changeDrawerWidth('20%');
        }
        done();
      },
      changeDrawerWidth(percentStr) {
        this.drawerSize = percentStr;
      },
      closeDrawer() {
        this.isVisible = false;
      }
    }

}
</script>
<style lang="scss" scoped>

  .info-part-container {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    height: 12%;
    background: rgb(169, 169, 169, .1);

    .inner-container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: repeat(2, 1fr);
      background: rgba(255, 255, 255, .7);
      border-radius: 10px;
      box-shadow: 0 0 5px rgba(128, 128, 128, 1);
      padding: 10px 55px;
      margin: 0 0 0 2vw;
      
      .icon-container {
        width: 100%;
        height: 100%;
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        text-align: center;

        &__icon {
          font-size: 48px;
          color: #409EFF;
        }
  
        &__hint {
          font-size: 1.8vh;
          font-weight: bold;
          margin-top: 8px;
          white-space: nowrap;
        }
      }
  
      .building-type-container {
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 2.4vh;
        grid-column: 2;
        grid-row: 1 / span 2;
        letter-spacing: 3px;
      }

    }

  }

  .menu {
    width: 20vw;

    .item-container {
      width: 100%;
      display: grid;
      grid-template-columns: 8.5fr 1.5fr;

      .menu-item {
        grid-column: 1;
        border-radius: 10px;

        &__icon {
          font-size: 38px !important;
        }

        &__name {
          font-size: 2.2vh;
          margin-left: 20px;
          margin-bottom: 10px;
        }

      }

      .enter-icon {
        grid-column: 2;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 32px !important;
        color: #67C23A;
        padding: 5px 0 0 0;
        cursor: pointer;
        border-radius: 10px;
      }

      .enter-icon:hover {
        background: rgb(240, 249, 235);
      }

      .el-menu-item:hover {
        background: #fff !important;
        color: #409EFF;
      }

    }
  }

</style>